import React, { CSSProperties } from 'react'
import { Input, Text, View } from '@tarojs/components'
import { CommonEventFunction } from '@tarojs/components/types/common'
import { InputProps } from '@tarojs/components/types/Input'
import './CustomInput.scss'

interface Props {
  label: string;
  name?: string;
  placeholder?: string;
  maxLength?: number
  type?: 'text' | 'number' | 'idcard' | 'digit'
  onInput?: CommonEventFunction<InputProps.inputEventDetail>
  placeholderClass?: string
  value?: string
  onBlur?: CommonEventFunction<InputProps.inputValueEventDetail>
  className?: string;
  inputClass?: string;
  unit?: string;
  showUnit?: boolean;
  containerStyle?: string | CSSProperties
}

const CustomInput: React.FC<Props> = ({
  label, name, placeholder, maxLength, type, onInput, placeholderClass, value,
  onBlur, className = 'customInput-formContainer', unit = '', showUnit = false, containerStyle, inputClass
}) => (
  <View className={className} style={containerStyle}>
    <Text className="customInput-label">{label}</Text>
    <View className="customInput-formControl">
      <Input
        type={type}
        name={name}
        onInput={onInput}
        className={inputClass}
        maxlength={maxLength}
        placeholder={placeholder}
        placeholderClass={placeholderClass}
        value={value}
        onBlur={onBlur}
      />
      {showUnit && <Text className="customInput-unit">{unit}</Text>}
    </View>
  </View>
)

export default CustomInput
